<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                    <div class="header_box_main">
                        评价详情
                    </div>
                </template>
                <template v-slot:right>
                    <div class="header_box_right" @click="delReply">
                        删除
                    </div>
                </template>
            </HeaderView>
        </div>

        <div class="item" v-for="item in myReply" :key="item.num">
            <ul>
                <li>
                    <span>订单编号:</span>
                    <span>{{item.num}}</span>
                </li>
                <li>
                    <span>顾客昵称:</span>
                    <span>{{item.customerName}}</span>
                </li>
                <li>
                    <span>顾客地址:</span>
                    <span>{{item.customerAddress}}</span>
                </li>
                <li>
                    <span>购买商品:</span>
                    <span>{{item.goodsName}}</span>
                </li>
                <li>
                    <span>送达时间:</span>
                    <span>{{item.sendTime}}</span>
                </li>
            </ul>

            <ul class="ul_bottom">
                <li>
                    <span>配送员:</span>
                    <span>{{item.dispatcher}}</span>
                </li>
                <li>
                    <span>配送评分:</span>
                    <span>
                        <van-rate v-model="item.pinfen" />
                    </span>
                </li>
                <li>
                    <span>评价内容:</span>
                    <span>{{item.text}}</span>
                    <span>
                        <van-tag color="red" plain>审核中</van-tag>
                    </span>
                </li>
                <li>
                    <span>评价时间:</span>
                    <span>{{item.replyTime}}</span>
                </li>
            </ul>
        </div>


    </div>
</template>
<style scoped>
    .header_box_main{
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .item{
        background: white;
        width: 90%;
        margin: 10px auto;
        font-size: 16px;
        padding: 10px;
    }
    li{
        margin-top: 20px;
    }
    .ul_bottom{
        border-top: 1px dashed grey;
        margin-top: 20px;
        padding-top: 10px;
    }
    span{
        margin-right: 4px;
    }
</style>
<script>
    import HeaderView from '@/components/header1View.vue';
    import { Dialog } from 'vant';
    export default{
        data(){
            return{
                myReply:[
                    {
                        num:12232964103521,  //编号
                        pinfen:3,   //评分
                        dispatcher:'张三',  //配送员
                        text:'服务好，配送快，速度一流',  ///评价内容
                        replyTime:'2021-12-03 17:16:17',  //评论时间
                        customerName:'张**',  //顾客昵称
                        customerAddress:'深圳市龙华区民治大道展滔大厦C座c903',  
                        goodsName:'咸鱼茄子, 口水鸡',  //商品名
                        sendTime:'2021-12-03 16:41:40',   //商品送达时间
                    }
                ]
            }
        },
        methods:{
            delReply(){
                Dialog.confirm({
                    message: '是否删除评论？',
                    })
                .then(() => {
                    // on confirm
                    this.$router.push('./MyReply')
                })
                .catch(() => {
                    // on cancel
                });
            }
        },
        components:{
            HeaderView,
        }
    }
</script>